<!--
 * @Description: 对账单详情
 * @Author: wning
 * @Date: 2023-03-22 16:48:18
 * @LastEditors: wning
 * @LastEditTime: 2023-03-31 11:03:57
-->
<template>
  <x-sub-page :content="'对账单详情'" @goBack="handleBack">
    <div class="pricing-detail" v-loading="pageLoading">
      <div class="form-components">
        <div class="panl-title">
          <span>基础信息</span>
        </div>
      </div>
      <el-descriptions
        direction="vertical"
        :column="3"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item :label="$t('financialSynergy.statement.account')">{{
          dataForm.number
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.statement.state')">{{
          selectDictLabel(dictOptions['srm_bill.state'], dataForm.state)
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.statement.accountBeginDate')">{{
          replaceDateTime(dataForm.beginDate)
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.statement.accountEndDate')">{{
          replaceDateTime(dataForm.endDate)
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.statement.totalPriceInfo')">{{
          dataForm.totalAmount | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.statement.untaxedAmountInfo')">{{
          dataForm.untaxedAmount | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.statement.totalAccount')">{{
          dataForm.totalQuantity | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.statement.creatBy')">{{
          dataForm.createName
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.statement.ceratTime')">{{
          dataForm.createTime
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="margin-top" :column="1" direction="vertical">
        <el-descriptions-item :label="$t('financialSynergy.invoice.remark')" prop="remark" class="no-margin-bottom">
          {{ dataForm.remark | emptyVal }}
        </el-descriptions-item>
      </el-descriptions>

      <div class="form-components">
        <div class="panl-title">
          <span>对账单明细</span>
        </div>
      </div>
      <el-form ref="dataForm" :model="dataForm">
        <x-table
          ref="tableCom"
          :isPagination="false"
          :data-source="dataForm.billDetailList"
          :row-key="'id'"
          :height="(dataForm.billDetailList.length > 5 ? dataForm.billDetailList.length : 5) * 42 + 50"
        >
          <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
          <el-table-column
            v-for="(item, index) in columns"
            :key="index"
            :prop="item.prop"
            :fixed="item.fixed"
            :show-overflow-tooltip="true"
            :width="item.width"
            :min-width="item.minWidth || '-'"
            :label="item.label"
            :sortable="'custom'"
          >
            <template #default="scope">
              <span v-if="item.prop === 'state'">{{
                selectDictLabel(dictOptions['srm_bill.state'], scope.row[item.prop])
              }}</span>
              <span v-else-if="item.prop === 'materialUnit'">{{selectDictLabel(dictOptions['srm_material.material_unit'], scope.row[item.prop])}}</span>
              <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
            </template>
          </el-table-column>
        </x-table>
      </el-form>
    </div>
    <fixed-btn-area>
      <el-button @click="handleBack"> {{ $t('common.goBack') }} </el-button>
      <el-button type="primary" v-if="isDetail" @click="handleReject" :loading="loading">
        {{ $t('financialSynergy.statement.reject') }}
      </el-button>
      <el-button type="primary" v-if="isDetail" @click="handleConfirm" :loading="loading">
        {{ $t('financialSynergy.statement.confirm') }}
      </el-button>
    </fixed-btn-area>
  </x-sub-page>
</template>

<script>
  import { QueryDictMixin, cloneDeep, selectDictLabel, throttle, replaceDateTime } from '@package/utils'
  import { detailColumns } from '@/modules/financialSynergy/config/statementAccount.js'
  import { apiGetBillDetail, apiBillRefuse, apiBillConfirm } from '@/modules/financialSynergy/api/statementAccount.js'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'StatementManagementDetail',
    mixins: [QueryDictMixin],
    inject: ['closePages'],
    data() {
      return {
        id: '',
        pageLoading: false,
        columns: detailColumns,
        srmDictKeys: ['srm_bill.state','srm_material.material_unit'],
        dataForm: {
          billDetailList: []
        },
        isDetail: true,
        totalAccount: '',
        loading: false
      }
    },
    mounted() {
      const {
        query: { id, isDetail }
      } = this.$route
      this.isDetail = isDetail
      this.id = id
      this.initDictConfig()
      this.getInfo(id)
    },
    methods: {
      selectDictLabel,
      replaceDateTime,
      // 获取详情
      async getInfo(id) {
        const { data, code } = await apiGetBillDetail(id)
        if (code === EnumApiCode.Success) {
          this.$nextTick(() => {
            this.dataForm = Object.assign(this.dataForm, cloneDeep(data))
            let totalAccount = 0
            this.dataForm.billDetailList?.forEach((item) => {
              totalAccount += Number(item.receivedQuantity || 0)
            })
            // 总数量
            this.totalAccount = totalAccount
          })
        }
      },
      handleReject() {
        this.$confirm('是否确认拒绝?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          apiBillRefuse([this.id])
            .then((res) => {
              if (res.code === EnumApiCode.Success) {
                this.$message.success(this.$t('common.opeartionSuccess'))
                this.handleBack()
              } else {
                this.$message.error(res.msg)
              }
            })
            .finally(() => {
              this.loading = false
            })
        })
      },
      handleConfirm() {
        this.$confirm('是否确认该数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          apiBillConfirm([this.id])
            .then((res) => {
              if (res.code === EnumApiCode.Success) {
                this.$message.success(this.$t('common.opeartionSuccess'))
                this.handleBack()
              } else {
                this.$message.error(res.msg)
              }
            })
            .finally(() => {
              this.loading = false
            })
        })
      },
      handleBack() {
        this.$router.go(-1)
        this.closePages()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pricing-detail {
    height: calc(100% - 71px);
    padding: 0 20px;
    overflow: auto;
    .panl-title {
      height: 45px;
      // margin: 0 16px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ededed;
      margin-bottom: 16px;
      span {
        display: inline-block;
        height: 22px;
        line-height: 22px;
        color: #171c26;
        border-left: 2px solid #4474f6;
        padding-left: 12px;
        font-size: 16px;
        font-weight: 700;
      }
    }
    ::v-deep .title-style {
      color: #707683;
      font-size: 14px;
    }
    ::v-deep .content-style {
      padding-bottom: 20px;
      color: #333;
      font-size: 14px;
    }
    .table-title {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #707683;
      font-weight: normal;
    }
  }
</style>
